<p>Slide Toggle using a simple NgModel.</p>

<mat-slide-toggle [(ngModel)]="isChecked">Slide Toggle Checked: {{isChecked}}</mat-slide-toggle>

<p>Slide Toggle inside of a Template-driven form</p>

<form class="example-form" #form="ngForm" (ngSubmit)="alertFormValues(form.form)">

  <mat-slide-toggle ngModel name="enableWifi">Enable Wifi</mat-slide-toggle>
  <mat-slide-toggle ngModel name="acceptTerms" required>Accept Terms of Service</mat-slide-toggle>

  <button matButton="elevated" type="submit">Save Settings</button>
</form>

<p>Slide Toggle inside of a Reactive form</p>

<form class="example-form" [formGroup]="formGroup" (ngSubmit)="alertFormValues(formGroup)" ngNativeValidate>

  <mat-slide-toggle formControlName="enableWifi">Enable Wifi</mat-slide-toggle>
  <mat-slide-toggle formControlName="acceptTerms">Accept Terms of Service</mat-slide-toggle>

  <p>Form Group Status: {{formGroup.status}}</p>

  <button matButton="elevated" type="submit">Save Settings</button>
</form>
